<template>
    <view class="assets-item">
        <view class="left">
            <text class="iconfont icon-butieshouru" v-if="assetsItem.scene === 0"></text>
            <text class="iconfont icon-weiquankoukuan" v-if="assetsItem.scene === 1"></text>
            <text class="iconfont icon-tixian1" v-if="assetsItem.scene === 2"></text>
            <text class="iconfont icon-tui" v-if="assetsItem.scene === 3"></text>
            <text class="iconfont icon-shouxufei" v-if="assetsItem.scene === 4"></text>
            <text class="iconfont icon-tui" v-if="assetsItem.scene === 5"></text>
            <text class="iconfont icon-wodehongbao" v-if="assetsItem.scene === 6"></text>
            <text class="iconfont icon-wodehongbao" v-if="assetsItem.scene === 7"></text>
            <view class="detail">
                <text class="type">{{ sceneFilter }}</text>
                <text class="time">{{ dateFormat }}</text>
            </view>
        </view>
        <view class="right">
            <text class="add" v-if="assetsItem.scene === 0 || assetsItem.scene === 3 || assetsItem.scene === 5">
                +{{ assetsItem.amount | Fixed(2) }}
            </text>
            <text class="reduce" v-if="assetsItem.scene === 1 || assetsItem.scene === 2 || assetsItem.scene === 4">
                -{{ assetsItem.amount | Fixed(2) }}
            </text>
        </view>
    </view>
</template>

<script>
	import moment from '@/utils/packges/moment';
	export default {
		name: 'AssetsItem',
        props: {
			assetsItem: {
				type: Object,
                default: () => {
                	return {}
                }
            }
        },
        computed: {
			sceneFilter() {
				switch (this.assetsItem.scene) {
					case 0:
						return '补贴收入';
					case 1:
						return '维权扣款';
					case 2:
						return '补贴提现';
					case 3:
						return '提现失败退回';
					case 4:
						return '提现手续费';
					case 5:
						return '提现失败退回手续费';
					case 6:
						return '红包收入';
					case 7:
						return '红包使用';
					default:
						return '';
				}
			},
			dateFormat() {
				return moment(this.assetsItem.createTime).format('YYYY-MM-DD HH:mm:ss');
			}
        },
	};
</script>

<style lang="scss" scoped>
    .assets-item {
        padding: 34rpx 0;
        padding-right: 20rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #e8e8e8;
        background: #fff;
        @include flexBox(space-between);
        &:first-child {
            border-top: none;
        }
        .left {
            display: flex;
            .iconfont {
                font-size: 70rpx;
            }
            .icon-butieshouru,
            .icon-tixian1 {
                color: $main-color;
            }
            .icon-weiquankoukuan {
                color: #347aff;
            }
            .icon-shouxufei {
                color: #43a8ff;
            }
            .icon-tixianshibaifanhuan {
                color: #f79d23;
            }
			.icon-wodehongbao {
				color: $main-color;
			}
            .detail {
                margin-left: 10rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .type {
                    color: #171717;
                    font-size: 28rpx;
                    font-weight: 600;
                }
                .time {
                    color: #717076;
                    font-size: 22rpx;
                }
            }
        }
        .right {
            text-align: right;
            font-size: 22rpx;
            color: #717076;
            .add {
                color: $main-color;
                font-size: 32rpx;
                font-weight: 600;
            }
            .reduce {
                color: #221d2c;
                font-size: 32rpx;
                font-weight: 600;
            }
        }
    }
</style>